<template>
  <div>
    <!-- 搜索区域 -->
    <div class="top">
      <input type="text" class="search"  placeholder="搜索歌手、歌曲、专辑" name="" id="" v-focus v-model="searchSpan">
    </div>
        <!-- 标签区域 -->
        <div class="mid" v-if="isShow">
          <div class="midd">热门搜索</div>
          
            <div class="content" v-for="(item,index) in hots" :key="index">{{ item.first }}</div>
          </div>
          <!-- 搜索内容 -->
          <div class="sea-con" v-else>
            <div class="search-first">搜索"{{ searchSpan }}"</div>
            <div class="info" v-for="(item,index) in row" :key="index">{{ item.keyword }}</div>
          </div>
        
  </div>
</template>

<script>
export default {
  data(){
    return{
      hots:[],
      searchSpan:'',
      isShow:true,
      row:[]
    }
  }, 
  watch:{
    searchSpan(val){
      if(val){
        this.isShow=false
        this.lookFor(val)
      }else{this.isShow=true}
      console.log(val);
    }
  },
  directives:{
     focus: {
        inserted(el) {
        el.focus();
                    }
                }
            },
  created(){
    this.getSearch()
  },
methods:{
 async getSearch(){
   const {data:res} =await  this.$api.getSearchUrl()
   console.log(res);
   this.hots = res.result.hots
  },
 async lookFor(keywords){
  const {data:res} =  await this.$api.search({
      keywords,
      type:'mobile'
    })
  this.row = res.result.allMatch
    console.log(res);
  }
}
}
</script>

<style lang="less" scoped>
.top{
  padding: 15px 10px;
  border-bottom: 1px solid #eee;
  input::placeholder{
    color: #bebdbd;
  }
  .search{
    width: 100%;
    height: 30px;
    line-height: 18px;
    background: rgba(0,0,0,0);
    font-size: 14px;
    color: #3a3838;
    box-sizing: border-box;
    padding: 0 30px;
outline: none;
background-color: #eee;
border: none;
border-radius: 1.2rem;
}
}
.mid{
margin: 10px 10px;
.midd{
  font-size: 12px;
    line-height: 12px;
    color: #666;
    margin-bottom: 10px;
}
    .content{
      display: inline-block;
      border: 1px solid #eee;
      // background-color: red;
      border-radius: 32px;
      height: 32px;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 0 14px;
    font-size: 14px;
    line-height: 32px;
    color: #333;
    }
}
.sea-con{
.search-first{
  height: 50px;
  
  line-height: 50px;
  font-size: 15px;
    width: 100%;
    color: #507DAF;
    display: inline-block;
    font-weight: 400;
    box-sizing: border-box;
    margin: 1px 0px;
    margin-left: 10px;
    border-top: 0.6px solid #eee;
    border-bottom: 0.6px solid #eee;
}
  .info{
    border-bottom: 0.6px solid #fff8f8;
      padding-right: 10px;
    font-size: 15px;
    line-height: 45px;
    color: #333;
  }
  
}

</style>
